doctype html
html
    head
        title= title
        meta(name="viewport", content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no")
        link(rel='stylesheet', href='/css/swiper.css')
        link(rel='stylesheet', href='/css/index.css')
    body
        .container(ng-controller="indexCtrl")
            .product
                img(ng-src="/image/main-product1.jpg")
                .content
                    .col-33.active#content(ng-click="moveToContent()" ng-class="{'active':content}") 定制内容
                    .col-33#size(ng-click="moveToSize()" ng-class="{'active':size}") 戒围
                    .clear
                .soundHelp
                    p(ng-click="openContentHelp()") 帮助
            .swiper-container.product-tab
                .swiper-wrapper
                    .swiper-slide.swiper-no-swiping
                        .recorder
                            div(ng-show="!isWeixin")
                                #timeline
                                    img(ng-src="/image/newTimeline.jpg")
                                    #line(ng-class="{'line':tip == 'recording'}")
                                    div(ng-switch='tip')
                                        p.text-center.tip(ng-switch-when="intro") 按住录音键，倒计时结束后开始录音
                                        p.text-center.tip(ng-switch-when="countdown") 倒计时结束后开始录音<br/>{{timeoutNumber}}
                                        p.text-center.tip(ng-switch-when="warning") 请尝试离话筒近一些
                                        p.text-center.tip(ng-switch-when="recording") {{recordingTip}}
                                        p.text-center.tip(ng-switch-when="analysing") 正在解析音频数据...
                                        p.text-center.tip(ng-switch-when="tooshort") 请尝试多录制一些
                                        p.text-center.tip(ng-switch-when="uploading") 上传中...
                                    canvas#wave-form(width="720px" height="240px" ng-show="tip == 'wave'")

                                    .leftBtn(ng-click="oldRecord();" ng-class="{'moreRecorder':isNewRecord && oldExist}")
                                    .rightBtn(ng-click="newRecord();" ng-class="{'moreRecorder':!isNewRecord && oldExist}")
                                    .text-center
                                        p 支持5S内声音录制
                                .row.btn.row-bottom.clearfix

                                    .col-50
                                        button.recorder-button.recorderSound(ng-class="{'recorderPress':recorderPress, 'disabled':!ready}")
                                        p 录音
                                    .col-50
                                        button.playSound(ng-click="playRecord();" ng-class="{'playPress':playPress}")
                                        p 播放
                            .weixin(ng-if="isWeixin")
                                p 如何定制<br/>How to customize
                                img(ng-src="//cdn.m-lab.cn/_pc/common/how_to_made4.jpg")
                                p 请在微信中声音定制
                    .swiper-slide.swiper-no-swiping
                        .size
                            p 尺寸选择
                            select
                                option 测试1
                                option 测试2
                                option 测试3
            .main-btn.text-center
                button 确 定
            .step1.step.text-center#step1
                .swiper-container.content-info
                    .swiper-wrapper
                        .swiper-slide
                            .slideClose(ng-click="closeInfo()")
                            p.state 1.<br/>
                                span 按住录音键，倒数3秒开始录制
                            .stepRecoder
                                .stepRecoderImg
                                p.stepRecoderText 按住录音
                            .slideBtn
                                p(ng-click="closeInfo()") 跳过
                                p(ng-click="nextSlide()") 下一步
                        .swiper-slide
                            .slideClose(ng-click="closeInfo()")
                            p.state 2.<br/>
                                span 声波形状对应您录制的语音
                            .stepSoundwave
                                img(ng-src="/image/soundwave.png")
                            .slideBtn
                                p(ng-click="closeInfo()") 跳过
                                p(ng-click="nextSlide()") 下一步
                        .swiper-slide
                            .slideClose(ng-click="closeInfo()")
                            p.state 3.<br/>
                                span 点击播放您录制的语音
                            .stepPlay
                                .stepPlayImg
                                p.stepPlayText 播放
                            .slideBtn
                                p(ng-click="closeInfo()") 跳过
                                p(ng-click="nextSlide()") 下一步
                        .swiper-slide
                            .slideClose(ng-click="closeInfo()")
                            p.state 4.<br/>
                                span 点击左侧按钮查看前一段语音
                            .stepLeft
                            .slideBtn
                                p(ng-click="closeInfo()") 跳过
                                p(ng-click="nextSlide()") 下一步
                        .swiper-slide
                            .slideClose(ng-click="closeInfo()")
                            p.state 5.<br/>
                                span 点击右侧按钮查看最新语音
                            .stepRight
                            .slideBtn.clearfix
                                p(ng-click="closeInfo()") 结束
                                p(ng-click="closeInfo()") 开始录音
            .step2.step.text-center#step2
                .slideClose(ng-click="closeInfo()")
                p 1.按住录音键，倒数3秒开始录制
                p 2.声波形状对应您录制的语音
                p 3.点击播放您录制的语音
                p 4.点击左侧按钮查看前一段语音
                p 5.点击右侧按钮查看最新语音
                .stepRecoder
                    .stepRecoderImg
                    p.stepRecoderText 1.
                .stepSoundwave
                    p.soundwaveNumber 2.
                    img(ng-src="/image/soundwave.png")
                .stepPlay
                    .stepPlayImg
                    p.stepPlayText 3.
                .stepLeft
                    p.leftNumber 4.
                .stepRight
                    p.rightNumber 5.
            .step3.step.text-center#step3
                p.title 请输入收货人手机号
                input.phone-input
                button.phone-btn(ng-click="getPhone()") 确定
    script(src="/js/swiper.min.js")
    script(data-main="/js/config.js" src="/lib/js/require.js")

